<template>
    <div class="preview-wrap" @mousewheel="handerMousewheel" @keydown="handleMousedown">
        <div class="preview">
            <div class="videoPlay">
                <vue3VideoPlay
                  ref="videoPlayRef"
                  width="700px"
                  height="730px"
                  title="视频播放"
                  :src="options.src"
                  :muted="options.muted"
                  :volume="options.volume"
                >
                </vue3VideoPlay>
                <div class="preview-footer" @click.stop="preventDefault">
                    <ul class="preview-footer-tools">
                        <li @click="CloseHandle"><img :src="closeImg" alt=""/></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>

import {nextTick, onMounted, onUnmounted, ref, watch, reactive} from "vue";
import closeImg from "./assets/close.png";
import vue3VideoPlay from 'vue3-video-play';


const options = reactive({
    src: "", //视频源
    poster: '', //封面
    volume: 0.3,
    muted: true
})
//ref
const videoPlayRef = ref()
// 是否显示预览
const show = ref(false);
// 当前预览图片的url
const currentImg = ref('');
//需要预览的图片数组
const imgList = ref<any>([]);
//图片所在的数据的key
const imgKey = ref('');
//图片定位置top
const imgTop = ref(0);
//图片定位置left
const imgLeft = ref(0);
//按下鼠标时当前鼠标所在位置x
const startPageX = ref(0);
//按下鼠标时当前鼠标所在位置y
const startPageY = ref(0);
//图片缩放
const imgScale = ref(1);
//图片旋转
const imgRotate = ref(0);
//事件定义
const emit = defineEmits(['register']);
watch(currentImg, () => {
    imgTop.value = 0
    imgLeft.value = 0
    imgScale.value = 1
    imgRotate.value = 0
});
// 关闭时重置值
const reset = () => {
    imgList.value = []
    currentImg.value = ''
    imgKey.value = ''
    imgTop.value = 0
    imgLeft.value = 0
    startPageX.value = 0
    startPageY.value = 0
    imgScale.value = 1
    imgRotate.value = 0
};
// 旋转
const handleRotate = (type: string) => {
    if (type === 'left') {
        imgRotate.value -= 90
    } else {
        imgRotate.value += 90
    }
};

// 切换上一张或者下一张
const handleCut = (type: string) => {
    if (imgList.value.length < 2) return
    const currentIndex = imgList.value.findIndex((item: { [x: string]: any; }) => {
        const url = imgKey.value ? item[imgKey.value] : item
        return url === currentImg.value
    });
    let targetIndex = 0
    if (type === 'last') {
        if (currentIndex === 0) {
            targetIndex = imgList.value.length - 1
        } else {
            targetIndex = currentIndex - 1
        }
    }
    if (type === 'next') {
        if (currentIndex === imgList.value.length - 1) {
            targetIndex = 0
        } else {
            targetIndex = currentIndex + 1
        }
    }
    const targetItem = imgList.value[targetIndex]
    currentImg.value = imgKey.value ? targetItem : targetItem
    handleXScroll(targetIndex)
}

// 使滚动条滚动到当前预览的那一张
const handleXScroll = (index: number) => {
    index = index < 4 ? 0 : index - 4
    const imgParentElement = document.querySelector('.preview-footer-thumbs')
    const imgWrapElement = document.querySelector('#thumb-item-' + index) as any;
    if (imgParentElement && imgWrapElement) {
        imgParentElement.scrollLeft = imgWrapElement?.offsetLeft
    }

}


// 点击缩略图切换当前预览
const handleClickThumb = (item: any, index: number) => {
    const url = imgKey.value ? item[imgKey.value] : item
    currentImg.value = url
    handleXScroll(index)
}
// 鼠标滚轮缩放图片
const handerMousewheel = (e: any) => {
    // 火狐浏览器为e.detail 其他浏览器均为e.wheelDelta
    // if ((e.wheelDelta > 0 || e.detail > 0) && imgScale.value < 4) {
    //   imgScale.value += 0.1
    // } else if ((e.wheelDelta < 0 || e.detail < 0) && imgScale.value > 0.5) {
    //   imgScale.value += -0.1
    // }
}

// 按下鼠标开始移动图片
const handleMoveStart = (e: any) => {
    const {pageX, pageY} = e
    startPageX.value = pageX - imgLeft.value
    startPageY.value = pageY - imgTop.value
    document.addEventListener('mousemove', handleMore, false)
    document.addEventListener('mouseup', clearEvent, false)
    e.preventDefault()
}

// 移除事件
const clearEvent = () => {
    document.removeEventListener('mousemove', handleMore, false)
}

// 按住鼠标移动时的处理
const handleMore = (e: any) => {
    const {pageX, pageY} = e
    imgTop.value = pageY - startPageY.value
    imgLeft.value = pageX - startPageX.value
    e.preventDefault()
}

// 阻止默认 行为
const preventDefault = (e: any) => {
    e.preventDefault()
}

const openMethods = {
    openUrl: (url: string) => {
        reset();
        options.src = url;
        nextTick(() => {
            videoPlayRef.value.play();
        });
        show.value = true;
    },
    closeCallback: Function
};
//页面 打开
onMounted(() => {
    emit("register", openMethods);
    document.body.style.overflow = 'hidden'
    document.addEventListener('mousemove', preventDefault, false);
    document.addEventListener("mousedown", handleMousedown, false);
});
//关闭
const CloseHandle = () => {
    if (openMethods.closeCallback) {
        openMethods.closeCallback();
    }
};


onUnmounted(() => {
    document.removeEventListener('mouseup', clearEvent, false)
    document.removeEventListener('mousemove', handleMore, false)
    document.removeEventListener('mousemove', preventDefault, false)
    document.removeEventListener('mousedown', handleMousedown, false)
    document.body.style.overflow = ''
});
//按键按下
const handleMousedown = (e: KeyboardEvent) => {
    if (e.code == "Escape") {
        CloseHandle();
    }
}

</script>

<style scoped>
.preview-wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.5);
}

.preview-wrap li {
    list-style: none;
}

.preview-wrap .preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

.preview-wrap .preview-content {
    position: relative;
    cursor: move;
    transition: 0.2s transform;
    max-height: 100vh;
}


.preview-wrap .preview-footer-tools li {
    margin-right: 10px;
    padding: 10px;
    border-radius: 50%;
    background: rgba(110, 110, 110, 0.7);
    cursor: pointer;
}

.preview-wrap .preview-footer-tools li > img {
    display: block;
    width: 30px;
    height: 30px;
}

.preview-wrap .preview-footer-tools li:hover i {
    color: #ef544e;
}

.preview-wrap .preview-footer-thumbs {
    margin-top: 20px;
    max-width: 700px;
    overflow-x: auto;
    white-space: nowrap;
}

.preview-wrap .preview-footer-thumbs .thumb-item {
    padding: 10px;
    margin-right: 10px;
    display: inline-block;
    background: rgba(102, 102, 102, 0.7);
    border-radius: 5px;
    cursor: pointer;
}

.preview-wrap .preview-footer-thumbs .thumb-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.preview-wrap .preview-footer-thumbs .thumb-item.active {
    background: rgba(239, 84, 78, 0.7);
}

.preview-wrap .preview-footer-thumbs::-webkit-scrollbar {
    height: 10px;
}

.preview-wrap .preview-footer-thumbs::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #d2d2d2;
    cursor: pointer;
}

.preview-wrap .preview-footer-thumbs::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #fff;
}

.preview-wrap .preview .close-icon {
    padding: 10px;
    position: absolute;
    top: 30px;
    right: 30px;
    border-radius: 50%;
    background: rgba(110, 110, 110, 0.7);
    cursor: pointer;
}

.preview-wrap .preview .close-icon > img {

    display: block;
    width: 30px;
    height: 30px;
}

.preview-footer {
    z-index: 10000;
    position: absolute;
    left: calc(50% + 360px);
    top: 80%;

}

.preview-footer-tools {
    display: flex;
    justify-content: center;
    z-index: 10000;
}
</style>
